<template>
  <div class="dashboard-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的申请" name="first">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="24">
              <el-form-item label="选择日期">
                <el-date-picker
                  size="mini"
                  v-model="formInline.user"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="状态：">
                <el-select size="mini" v-model="formInline.val1" placeholder="请选择">
                  <el-option
                    v-for="item in option1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审批结果：">
                <el-select size="mini" v-model="formInline.val2" placeholder="请选择">
                  <el-option
                    v-for="item in option2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" @click="onSearch">查询</el-button>
                <el-button size="mini" @click="onReset">重置</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button size="mini" type="primary" @click="onApply">申请优惠卷</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" label="申请号">
            <template slot-scope="scope">
              <el-button type="text" @click="gotoDetail(scope.row.id)">TradeCode21</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="申请部门"></el-table-column>
          <el-table-column prop="name" label="使用渠道"></el-table-column>
          <el-table-column prop="name" label="申请理由"></el-table-column>
          <el-table-column prop="name" label="状态"></el-table-column>
          <el-table-column prop="name" label="审批结果"></el-table-column>
          <el-table-column prop="name" label="申请事件"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="onCancel">取消</el-button>
              <el-button type="text" @click="onLoad">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <!-- 分页组件 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的审批" name="second">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请人">
                <el-input size="mini" v-model="formInline.user" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="选择日期">
                <el-date-picker
                  size="mini"
                  v-model="formInline.user"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="状态：">
                <el-select size="mini" v-model="formInline.val1" placeholder="请选择">
                  <el-option
                    v-for="item in option1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="审批结果：">
                <el-select size="mini" v-model="formInline.val2" placeholder="请选择">
                  <el-option
                    v-for="item in option2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" @click="onSearch">查询</el-button>
                <el-button size="mini" @click="onReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" label="申请号">
            <template slot-scope="scope">
              <el-button type="text" @click="gotoDetail(scope.row.id)">TradeCode21</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="申请人"></el-table-column>
          <el-table-column prop="name" label="申请部门"></el-table-column>
          <el-table-column prop="name" label="使用渠道"></el-table-column>
          <el-table-column prop="name" label="申请理由"></el-table-column>
          <el-table-column prop="name" label="状态"></el-table-column>
          <el-table-column prop="name" label="审批结果"></el-table-column>
          <el-table-column prop="name" label="申请事件"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="onApproval">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <!-- 分页组件 -->
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="申请优惠卷" :visible.sync="dialogAdd" width="60%">
      <div>
        <el-form :inline="true" :model="formAdd" class="demo-form-inline">
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请部门：">
                <el-input size="mini" v-model="formAdd.name" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用渠道：">
                <el-select size="mini" v-model="formAdd.val1" placeholder="请选择">
                  <el-option
                    v-for="item in option1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请理由：">
                <el-input size="mini" v-model="formAdd.name" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注：">
                <el-input size="mini" v-model="formAdd.name" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="使用规则：">
                <el-input
                  size="mini"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入"
                  v-model="formAdd.name"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="add">
            <i @click="addRow" class="el-icon-circle-plus-outline"></i>
          </div>
          <el-table
            :data="tableData"
            class="tb-edit"
            style="width: 100%"
            highlight-current-row
            @row-click="handleCurrentChange"
          >
            <el-table-column label="优惠卷数量" width="180">
              <template scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.date"
                  placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"
                ></el-input>
                <span>{{scope.row.date}}</span>
              </template>
            </el-table-column>
            <el-table-column label="优惠卷面值(元)" width="180">
              <template scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.name"
                  placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"
                ></el-input>
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="可兑换的截止日期">
              <template scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.address"
                  placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"
                ></el-input>
                <span>{{scope.row.address}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="兑换后的有效期(天)">
              <template scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.address"
                  placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"
                ></el-input>
                <span>{{scope.row.address}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template scope="scope">
                <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                <el-button
                  size="mini"
                  type="text"
                  @click.stop="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogAdd = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="审批" :visible.sync="dialogApproval" width="40%">
      <div>
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="onSubmitApproval(1)">同意</el-button>
        <el-button size="mini" type="danger" @click="onSubmitApproval(2)">不同意</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      dialogAdd: false,
      dialogApproval: false,
      activeName: 'first',
      formInline: {
        user: '',
        region: '',
        val1: '',
        val2: ''
      },
      textarea: '',
      formAdd: {},
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      tableData2: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [],
      option1: [
        {
          value: '选项1',
          label: '待审批'
        },
        {
          value: '选项2',
          label: '已审批'
        },
        {
          value: '选项3',
          label: '已下载'
        },
        {
          value: '选项4',
          label: '已兑换'
        },
        {
          value: '选项5',
          label: '已过兑换期'
        },
        {
          value: '选项6',
          label: '已过使用期'
        },
        {
          value: '选项7',
          label: '已作废'
        }
      ],
      option2: [
        {
          value: '选项1',
          label: '通过'
        },
        {
          value: '选项2',
          label: '不通过'
        }
      ]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    gotoDetail(val) {
      this.$router.push({ path: 'couponGiveDetail' })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    onSearch() {
      this.$notify({
        title: '查询成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    },
    onLoad() {
      this.$notify({
        title: '下载成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    },
    onApply() {
      this.dialogAdd = true
    },
    onReset() {
      this.formInline = {
        user: '',
        region: '',
        val1: '',
        val2: ''
      }
    },
    addRow() {
      let obj = {
        date: '',
        name: '',
        address: ''
      }
      this.tableData.push(obj)
    },
    onRowEdit() {},
    onSubmit() {},
    onApproval() {
      // 审批
      this.dialogApproval = true
    },
    onSubmitApproval(val) {
      if (val == 1) {
        this.$notify({
          title: '同意',
          message: '这是一条成功的提示消息',
          type: 'success'
        })
      } else {
        this.$notify({
          title: '不同意',
          message: '这是一条成功的提示消息',
          type: 'success'
        })
      }
      this.dialogApproval = false
    },
    handleCurrentChange(row, event, column) {
      console.log(row, event, column, event.currentTarget)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
      // this.tableData2.delete(row.$index)
      this.tableData.splice(index, 1)
      this.$notify({
        title: '删除成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
}
.add {
  font-size: 30px;
  i {
    cursor: pointer;
  }
}
.tb-edit .el-input {
  display: none;
}
.tb-edit .current-row .el-input {
  display: block;
}
.tb-edit .current-row .el-input + span {
  display: none;
}
</style>
